<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="http://192.168.5.208:10800/adminlte-2.3.6/plugins/video-js-5.19.2/video-js.css" />
		<style type="text/css">
			.video-js .vjs-play-control.vjs-playing {
				visibility: hidden;
			}
			
			.video-js .vjs-tech {
				pointer-events: none;
			}
		</style>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script src="http://192.168.5.208:10800/adminlte-2.3.6/plugins/jQuery/jquery-2.2.3.min.js"></script>

		<script src="http://192.168.5.208:10800/adminlte-2.3.6/plugins/video-js-5.19.2/video.js"></script>
		<script src="http://192.168.5.208:10800/adminlte-2.3.6/plugins/video-js-5.19.2/videojs-contrib-hls4.js"></script>
		<script src="http://192.168.5.208:10800/adminlte-2.3.6/plugins/videojs-hotkeys/videojs.hotkeys.min.js"></script>
		<script type="text/javascript">
			videojs.options.flash.swf = 'http://192.168.5.208:10800/adminlte-2.3.6/plugins/video-js-5.19.2/video-js-fixed.swf';
			videojs.options.techOrder = ['html5', 'flash'];
		</script>
	</head>

	<body>
		<div class="video-wrapper" style="padding-bottom:56.25%;position:relative;margin:0 auto;">
			<div class="video-inner" style="position:absolute;top:0;bottom:0;left:0;right:0;">
				<video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none" poster="">
					<source src="" type=""></source>
					<p class="vjs-no-js">
						To view this video please enable JavaScript, and consider upgrading to a web browser that
						<a href="http://videojs.com/html5-video-support/" target="_blank">
							supports HTML5 video
						</a>
					</p>
				</video>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	var player = null;

	var videoUrl = 'rtmp://192.168.5.208:10935/hls/stream_1';
	var videoImg = '/images/noimage.gif';
	player = setupPlayer(videoUrl, videoImg);

	function setupPlayer(videoUrl, videoImg) {
		videoUrl = videoUrl || "rtmp://121.40.50.44/live/stream_1";
		videoImg = videoImg || "/images/snap.png";
		$("#videojs").attr("poster", videoImg);
		if(videoUrl.indexOf("rtmp") == 0) {
			$("#videojs").find("source").attr("src", videoUrl).attr("type", "rtmp/mp4");
			player = videojs("videojs", {
				notSupportedMessage: '您的浏览器没有安装或开启Flash,戳我开启！',
				techOrder: ["flash"],
				autoplay: true
			});
			videojs('videojs').ready(function() { //双击全屏支持Esc退出全屏
				this.hotkeys({
					volumeStep: 0.1,
					seekStep: 5,
					enableVolumeScroll: false, //禁用鼠标滚轮调节问音量大小
					enableModifiersForNumbers: false
				});
			});
			player.on("error", function(e) {
				var $e = $(".vjs-error .vjs-error-display .vjs-modal-dialog-content");
				var $a = $("<a href='http://www.adobe.com/go/getflashplayer' target='_blank'></a>").text($e.text());
				$e.empty().append($a);
			})
		} else {
			var timeout = 10000;
			var step = 500;
			var cnt = 0;

			function test() {
				cnt += step;
				mui.ajax(videoUrl, {
					type: "HEAD",
					global: false,
					complete: function(xhr, ts) {
						if(cnt > timeout) {
							$(".player-wrapper").unmask();
							$.gritter.add("请求数据失败");
							return;
						}
						//xhr.status == 0 , when cross domain request not found
						if(xhr.status == 404 || xhr.status == 0 || (xhr.status != 200 && !isPC())) {
							console.log("video is no ready, waiting...");
							setTimeout(test, step);
						} else {
							$(".player-wrapper").unmask();
							$("#videojs").find("source").attr("src", videoUrl).attr("type", "application/x-mpegURL");
							player = videojs("videojs", {
								autoplay: true
							});
						}
					}
				})
			};
			$(".player-wrapper").mask("加载中...", 100);
			test();
		}

	};
</script>